
<template>
  <div id="class">
    <!--空白页-->
   <!-- <div v-if="chenload">
			<div v-if="banji.length!=0" class="conte"> -->
				<!-- <mt-loadmore :bottom-method="loadBottom"  :bottom-all-loaded="allLoaded" ref="loadmoredetail"> -->
					<mescroll-vue ref="mescroll0" :up="getMescrollUp(0)" @init="mescrollInit0">
					<!-- <div> -->
						<ul class="content-list" id='dataList0'>
						 
							<li  v-for="(item,index) in tab0.list" :key="index" class="lista" @click="dianji(item.id)">
								 <div class="class">
										<img :src="imgurl+item.thumb" alt="" srcset="">
								 </div>
								 <p class="content">{{item.name}}</p>
									<div class="main">
										<div class="main-left">
												<ul class="left-center">
													<li class="list" v-for="(item,index) in item.teachers" :key="index" style="margin-right:0.15rem">
															<img :src="imgurl+item.avatar" alt="" srcset="">
															<p>{{item.name}}</p>
													</li>
											</ul>
											 <p class="times">
												 <img class="banji" src="../assets/img/clock.png" alt="" srcset="">
												 {{item.start_time}}-{{item.end_time}}
												</p>
										</div>
										<div class="main-right"> 
											<button class="btn">去学习</button>
											<p class="buy">{{item.sales}}人已加入</p>
										</div>
									</div>
							</li>
							
						</ul>
					<!-- </div> -->
				</mescroll-vue>
			<!-- </div>
			 <div style="text-align: center;margin-top: 1.7rem;padding-bottom: 2rem" v-else>
				<div class="chen-kongpic">
					<img src="static/img/kongbai.png" mode=""></img>
				</div>
				<div class="chen-kong-text"><span>您暂未加入任何班级</span></div>
			 </div>
		</div>
		<div class="loadmore" v-else>
			<img src="static/img/load.gif" alt="">
		</div> -->
  </div>
</template>

<script>
   import axios from 'axios'
	 import MescrollVue from 'mescroll.js/mescroll.vue'
  // import  Base64 from  '../assets/js/base64'
  export default {
    name: "home",
		components: {
		  MescrollVue
		},
    data(){
      return{
				imgSrc: require("../assets/img/kongbai.png"), 
				chenload:false,
				tabType: 0 ,// 菜单类型
				tab0: {mescroll: null, list: [], isListInit: false}, // 全部
        banji:[],
        num:200,
				imgurl:this.$store.state.img,
				loadzheng:false,
				noloadzheng:false,
				allLoaded:false,
				page:1,
      }
    },
    methods:{
			mescrollInit0 (mescroll) {
			  mescroll.tabType = 0; // 加入标记,便于在回调中取到对应的list
			  this.tab0.mescroll = mescroll;
			},
			
			getMescrollUp (tabType) {
			  let emptyWarpId = 'dataList' + tabType;
			  return {
			    auto: true,
			    callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
			    noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					   empty: {
					     warpId: emptyWarpId, // 父布局的id;
					     icon: this.imgSrc, // 图标,默认null
					     tip: '您暂未加入任何班级', // 提示
					     
					   },
			  }
			},
			upCallback (page, mescroll) {
			  if (mescroll.tabType === 0) {
			    // 全部
			    this.tab0.isListInit = true;// 标记列表已初始化,保证列表只初始化一次
					this.axios.get(this.$store.state.url +'User/classList',{
						 params:{
							page: page.num,
							limit:page.size
						 }
					 }).then(res=>{
										// console.log(res.data.data.class)
						this.chenload = true;
						if(res.data.errcode==0||res.data.errcode=='0'){
								var curPageData = res.data.data.class;
								mescroll.endSuccess(curPageData.length);// 联网成功的回调,隐藏下拉刷新和上拉加载的状态;
								 if (page.num === 1) this.tab0.list = []; // 如果是第一页需手动制空列表
								 this.tab0.list = this.tab0.list.concat(curPageData); // 追加新数据
								 // this.tab0.list=res.data.data.order
						}
					
					})
			  }
			},
			
      dianji(id){
         this.$router.push({
            path:'/class',
            query:{
              bid:id
            }
          })
      }
    },
    // 转换时间格式
  }
</script>

<style scoped>
	.mescroll {
	  position: fixed;
	  top: 0rem;
	  bottom: 0;
	  height: auto;
	}
	.content-list{
		width: 92%;
		margin: auto;
	}
#class{
  width: 100%;
  height: 100vh;
  position: relative;
}
.footer{
  height: 0.98rem;
  width: 100%;
  position: absolute;
  bottom: 0rem;
  margin: 0 auto;
  left: 0rem;
}
.conte{
  width: 92%;
  margin: 0 auto;
  /* border-bottom: 0.01rem solid #EDEDED; */
}
.lista{
  border-bottom: 0.01rem solid #EDEDED
}
.banji{
  width: 0.22rem;
  height: 0.22rem;
  display: block;
  position: absolute;
  left: -0.26rem;
  top: 0.07rem;
}
  .kong{
    width: 2.8rem;
    margin-top: 36%;
  }
  .lodding{
    font-size: 0.28rem;
    text-align: center;
    float: left;
    margin-left: 3.43rem;
  }
  .router{
    text-decoration:none;
    color: #000;
  }
.class img{
  width: 100%;
  height: 3.3rem;
  margin-top: 0.3rem;
  border-radius:0.1rem 0.1rem 0px 0px;
}
.content{
    width:6.81rem;
    height:0.61rem;
    font-size:0.28rem;
    font-family:PingFang-SC-Medium;
    font-weight:500;
    color:rgba(51,51,51,1);
    line-height:0.38rem;
		margin-top: .2rem;
}
.main{
  width:100%;
  height: 1.9rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0rem;
  position: relative;
}
.left-center{
 display: flex
}
.left-center img{
  width: 0.55rem;
  height: 0.55rem;
  display: block;
  border-radius: 50%;
}
.left-center span{
  height:0.2rem;
  font-size:0.2rem;
  font-family:PingFang-SC-Medium;
  font-weight:500;
  color:rgba(51,51,51,1);
   line-height:0.38rem;
   margin-top: 0.09rem;
   display: block
}
.list{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center
}
.list li{
  margin-right: 0.15rem;
}
.list p{
  margin-top: 0.05rem
}
.btn{
  width: 1.6rem;
  height: 0.6rem;
  background-color:#0287FF;
  color: #ffffff;
  border: none;
  border-radius: 0.3rem;
	font-size: .28rem;
}
.times{
    font-size:0.24rem;
    font-family:PingFang-SC-Medium;
    font-weight:500;
    color:rgba(194,201,211,1);
    line-height:0.32rem;
    position: absolute;
    left: 0.26rem;
    top: 1.46rem;

}
.main-right p{
  margin-top: 0.3rem
}
.left-center p{
    font-size:0.2rem;
    font-family:PingFang-SC-Medium;
    font-weight:500;
    color:rgba(51,51,51,1);
    line-height:0.38rem;
  
}
.buy{
    font-size:0.24rem;
    font-family:PingFang-SC-Medium;
    font-weight:500;
    color:rgba(194,201,211,1);
    line-height:0.32rem;
    position: absolute;
    left: 5.5rem;
    top: 1.1rem;
}

  .all{
    /*margin-top: 0.98rem;*/
    width:6.9rem;
    height:6.2rem;
    background:rgba(255,255,255,1);
    box-shadow:0rem 0rem 0.10rem 0rem rgba(71,68,80,0.1);
    border-radius:0.10rem;
    margin-left: 0.3rem;
    margin-right: 0.3rem;
    margin-top: 0.3rem;

  }
  .head img{
    width:6.9rem;
    height:3.3rem;
    border-radius:0.10rem 0.10rem 0rem 0rem;
  }
  .contentname{
    /*width:6.53rem;*/
    /*height:0.61rem;*/
    font-size:0.28rem;
    font-family: "Ubuntu", -apple-system-font, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif !important;
    font-weight:500;
    color:rgba(51,51,51,1);
    margin-left: 0.16rem;
    line-height:0.38rem;
    margin-top: 0.19rem;
    margin-bottom: 0.3rem;
  }
  .teacher{
    list-style: none;
    display: inline;
  }
  .imgteacher1{
    width:0.55rem;
    height:0.55rem;
    border-radius:50%;
    margin-left: 0.2rem;
    float: left;
  }
  .imgteacher2{
    width:0.55rem;
    height:0.55rem;
    border-radius:50%;
    margin-left: 1rem;
    clear: both;
    float: left;
    margin-top: -0.54rem;
  }
  .myid1{
    font-size:0.20rem;
    font-family: "Ubuntu", -apple-system-font, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif !important;
    font-weight:500;
    text-align: center;
    margin-left: 0.2rem;
    margin-top: 0.2rem;
    clear: both;
    float: left;
  }
  .myid2{
    margin-top: 0.2rem;
    font-size:0.20rem;
    font-family: "Ubuntu", -apple-system-font, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif !important;
    font-weight:500;
    text-align: center;
    margin-left: 0.15rem;
    margin-right: 1rem;
    /*margin-top: -0.61rem;*/
    float: left;
  }
  .price{
    margin-top: 1.5rem;
  }
  .price2{
    margin-top: 1.4rem;
    border: none;
  }
  .price h3{
    height:0.23rem;
    font-size:0.30rem;
    font-family: "Ubuntu", -apple-system-font, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif !important;
    font-weight:800;
    color:rgba(255,2,20,1);
    float: right;
    margin-right: 1.3rem;
    margin-top: -0.95rem;
  }
  .price span{
    /*border: none;*/
    width:0.90rem;
    height:0.39rem;
    background:rgba(255,255,255,1);
    font-size:0.2rem;
    font-family: "Ubuntu", -apple-system-font, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif !important;
    /*font-weight:500;*/
    color:rgba(255,2,20,1);
    border-radius:0.15rem;
    border:0.01rem solid rgba(255,2,20,1);
    padding-bottom: 0.032rem;
    float: right;
    text-align: center;
    margin-top: -0.93rem;
    margin-right: 0.2rem;
  }
  .price p{
    font-size:0.20rem;
    font-family: "Ubuntu", -apple-system-font, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif !important;
    font-weight:500;
    color:rgba(255,2,20,1);
    line-height:0.32rem;
    float: right;
    margin-right: 0.2rem;
    margin-top: -0.51rem;
  }
  .price3{
    width:1.80rem;
    height:0.60rem;
    float: right;
    background:rgba(255,2,20,1);
    border-radius:0.30rem;
    margin-top: -0.95rem;
    margin-right: 0.2rem;
    font-size:0.28rem;
    font-family: "Ubuntu", -apple-system-font, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif !important;
    font-weight:500;
    color:rgba(255,255,255,1);
    line-height:0.32rem;
    border: none;
  }
  .button1{
    background:rgba(240,240,240,1);
    width:1.80rem;
    height:0.60rem;
    float: right;
    border-radius:0.30rem;
    margin-top: -0.95rem;
    margin-right: 0.2rem;
    font-size:0.28rem;
    font-family: "Ubuntu", -apple-system-font, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif !important;
    font-weight:500;
    color:rgba(153,153,153,1);
    line-height:0.32rem;
    border: none;
  }
  .time img{
    width:0.22rem;
    height:0.22rem;
    margin-left: 0.18rem;
    float: left;
    margin-top: 0.06rem;
    margin-right: 0.1rem;
  }
  .shopping{
    width:2.29rem;
    height:0.19rem;
    font-size:0.24rem;
    font-family: "Ubuntu", -apple-system-font, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif !important;
    color:rgba(194,201,211,1);
    float: right;
    text-align: right;
    margin-top: -0.54rem;
    margin-right: 0.2rem;
    margin-bottom: 0.3rem;
  }
  .myTime{
    width:6.9rem;
    font-size:0.24rem;
    font-family: "Ubuntu", -apple-system-font, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif !important;
    /*font-weight:500;*/
    color:rgba(194,201,211,1);
    line-height:0.32rem;
    float: left;
    margin-bottom: 0.19rem;
  }

  /*tab切换样式*/
  .bottom-tab{
    width:7.5rem;
    height:0.98rem;
    background:rgba(255,255,255,1);
    box-shadow:0rem -0.03rem 0.05rem 0rem rgba(71,68,80,0.06);
    opacity:0.95;

    position:fixed;
    left: 0rem;
    bottom: 0rem;
    display: flex;
    z-index: 999
  }

  .tab-item{
    font-size:0.24rem;
    font-family: "Ubuntu", -apple-system-font, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif !important;
    font-weight:500;
    color:rgba(194,201,211,1);
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .myimg{
    width:0.42rem;
    height:0.42rem;
  }
  .on{
    color: #0287FF;
  }

</style>
